<template>
  <div class="rg-cont">
    <div class="artwork">
      <img src="../assets/signPic.png" alt="">
    </div>
    <div class="main">
      <div class="rg-box">
        <rgLogo></rgLogo>
        <div class="rg-form">
          <el-form ref="form" :model="registerForm" :rules="rules">
            <el-row>
              <el-col :span="9">
                <el-form-item prop="username">
                  <el-input placeholder="请输入用户名" v-model="registerForm.username"></el-input>
                </el-form-item>
              </el-col>
              <!-- ...其他表单项... -->
              <el-col :span="11" :offset="1">
                <el-form-item prop="birthday">
                  <div class="block">
                    <el-date-picker v-model="registerForm.birthday" type="date" placeholder="选择您的出生日期">
                    </el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="9">
                <el-form-item prop="phone">
                  <el-input placeholder="请输入手机号" v-model="registerForm.phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9" :offset="2">
                <el-form-item prop="email">
                  <el-input placeholder="请输入邮箱号" v-model="registerForm.email"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="9">
                <el-form-item prop="password">
                  <el-input placeholder="请输入密码" v-model="registerForm.password" show-password></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9" :offset="2">
                <el-form-item prop="passwordConfirm">
                  <el-input placeholder="请确认密码" v-model="registerForm.passwordConfirm" show-password></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col class='left'>
                <el-form-item prop="checked">
                  <el-checkbox v-model="registerForm.checked">同意CodePilot
                    <el-link class="pact" type="info">《用户协议》</el-link>
                    和
                    <el-link class="pact" type="info">《隐私协议》</el-link>
                  </el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- ...其他表单项... -->
            <el-row class="top">
              <el-col :span="9">
                <el-form-item>
                  <el-button type="primary" @click="do_register">注 册</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="rg_right">
        <el-link type="info" @click="$router.push('/login')">已有账号?立即登录</el-link>
      </div>
    </div>

    <!-- 注册成功提示小卡片 -->
    <el-card v-if="showSuccessCard" class="success-card">
      <p>恭喜您，注册成功！</p>
      <h1 style="color: #FF6700;">欢迎使用CodePilot！</h1>
      <div>我们致力于成为用户算法刷题的：</div>
      <h4 style="color: #FF6700; text-align: left;">1. 引导者</h4>
      <div class="card-content">
        <div class="card-item">
          <div class="card-icon">
            <i class="el-icon-star-off"></i>
          </div>
          <div class="card-text">
            个性化的题目推荐，帮助用户快速找到适合的算法题
          </div>
        </div>
        <div class="card-item">
          <div class="card-icon">
            <i class="el-icon-notebook-2"></i>
          </div>
          <div class="card-text">
            用户点击推荐卡片，跳转至对应做题页面
          </div>
        </div>
        <h4 style="color: #FF6700; text-align: left;">2. 记录者</h4>
        <div class="card-item">
          <div class="card-icon">
            <i class="el-icon-tickets"></i>
          </div>
          <div class="card-text">
            多维度记录用户的做题反馈
          </div>
        </div>
        <div class="card-item">
          <div class="card-icon">
            <i class="el-icon-data-analysis"></i>
          </div>
          <div class="card-text">
            做题绩效分析，帮助用户发现做题短板和进步空间
          </div>
        </div>
        <div class="card-item">
          <div class="card-icon">
            <i class="el-icon-arrow-right"></i>
          </div>
          <div class="card-text">
            <router-link class="card-link" to="/questionnaire">点击开始刷题</router-link>
          </div>
        </div>
      </div>
      <el-button class="close-btn" type="text" icon="el-icon-close" @click="closeSuccessCard"></el-button>
    </el-card>
  </div>
</template>

<script>
import rgLogo from '../components/LoginLogo.vue'
import { register } from '@/api/login'
import { isPhone } from '@/utils/validate'
import { isEmail } from '@/utils/validate'
import { isChecked } from '@/utils/validate'


export default {
  name: "signUp",
  components: {
    rgLogo,
  },
  data() {
    //密码确认
    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      registerForm: {
        username: '',
        birthday: '',
        phone: '',
        email: '',
        password: '',
        passwordConfirm: '',
        checked: false,
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        birthday: [{ required: true, message: '请选择出生日期', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { validator: isPhone, trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { validator: isEmail, trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        passwordConfirm: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validatePassword, trigger: 'blur' },
        ],
        checked: [
          { required: true, message: '请阅读并同意协议', trigger: 'blur' },
          { validator: isChecked, trigger: 'blur' },
        ],
      },
      loading: false,
      showSuccessCard: false,
    };
  },
  methods: {
    convertDateString(dateString) {
      // 创建日期对象
      var date = new Date(dateString);

      // 获取日期的各个部分
      var year = date.getFullYear();
      var month = (date.getMonth() + 1).toString().padStart(2, '0');
      var day = date.getDate().toString().padStart(2, '0');

      // 构建格式化后的日期字符串
      var formattedDate = year + '-' + month + '-' + day;

      // 返回结果
      return formattedDate;
    },
    do_register() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          // console.log(this.convertDateString(this.registerForm.birthday))
          register(this.registerForm.username, this.convertDateString(this.registerForm.birthday), this.registerForm.phone, this.registerForm.email, this.registerForm.password, null, null).then(res => {
            console.log(res);
            if (res.code == 50003) {
              this.$message.error('注册失败')
              this.loading = false
            }
            else {
              this.showSuccessCard = true;
            }
          })
        }
      })
    },
    closeSuccessCard() {
      this.showSuccessCard = false;
      this.$router.push('/questionnaire');
    },
  },
}
</script>

<style lang="scss">
/* ...原有样式... */
.el-link {
  color: #402E32 !important;
}

.rg-cont {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;


  .artwork {
    width: 514px;
    height: 100%;
    background-color: #FFEACE;
    position: relative;

    img {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -250px;
      margin-left: -330px;
    }
  }

  .main {
    flex: 1;
    height: 100%;
    background-color: #FFF7EF;
    position: relative;

    .rg-box {
      width: 600px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -250px;
      margin-top: -200px;

      .rg-form {
        margin-top: 35px;

        .el-input__inner {
          background-color: #FFFEFC;
          border: none;
          color: #865E2A;
          font-size: 18px;
          padding: 10px;
          border-radius: 5px;
        }

        .el-input__inner:focus {
          border: solid 2px #402E32;
        }

        .el-input__inner::placeholder {
          color: #BAA89B;
          font-size: 18px;
        }

        .el-button--primary {
          width: 225px;
          background-color: #402E32;
          border: none;
          font-size: 18px;
          color: #FFFEFC;
        }

        .pact {
          font-size: 10px;
        }

        .el-checkbox__input+.el-checkbox__label {
          color: #402E32;
        }

        .el-checkbox__input.is-checked {
          border-color: red;
        }

        .el-checkbox__input.is-checked .el-checkbox__inner {
          background-color: #FFCDA9;
          border-color: #FFCDA9;
        }

        .el-checkbox__input.is-focus .el-checkbox__inner {
          border-color: #FFCDA9;
        }

        .el-checkbox__inner:hover {
          border-color: #FFCDA9;
        }

        .block .el-input__inner::placeholder {
          text-indent: 20px;
        }

        .block .el-input__inner {
          text-indent: 20px;
        }

        .left {
          text-align: left;
        }
      }
    }

    .rg_right {
      position: absolute;
      right: 0;
      top: 0;
      margin: 10px;
    }

  }
}

.success-card {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  width: 850px;
  height: 600px;
  padding: 20px;
  text-align: center;
  background-color: #FDF2E9;
  border-radius: 10px;

  .card-content {
    margin-top: 20px;
  }

  .card-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }

  .card-icon {
    flex: 0 0 40px;
    height: 40px;
    line-height: 40px;
    background-color: #FBE5D8;
    border-radius: 50%;
    margin-right: 10px;

    i {
      font-size: 20px;
      color: #402E32;
    }
  }

  .card-text {
    flex: 1;
    text-align: left;
    color: #402E32;
  }

  .card-link {
    color: #FF6700;
    text-decoration: underline;
  }

  .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}
</style>